<template>
    <div class="cartcontrol">
        <div class="cart-decrease" @click.stop="decreaseCart">
            -
        </div>
        <div class="cart-count">{{count}}</div>
        <div class="cart-add" @click.stop="addCart">
            +
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      count: '0'
    }
  },
  methods: {
    addCart () {
      this.count++
    },
    decreaseCart () {
      if (this.count === 0) {
        return
      }
      this.count--
    }
  }
}
</script>
<style lang="scss" scoped>
.cartcontrol{
    width: 172rpx;
    height: 50rpx;
    border-radius: 10rpx;
    border:1rpx solid #b3b3b3;
    text-align:center;
    line-height: 50rpx;
    color: #ed1c24;
    .cart-decrease{
        display: inline-block;
        vertical-align: top;
        width: 25%;
        
    }
    .cart-count{
        display: inline-block;
        width: 50%;
        color: #333;
    }
    .cart-add{
        display: inline-block;
        vertical-align: top;
        width: 25%;
    }
}
</style>
